<template>
  <div v-if="visible" class="alert-dialog-overlay" @click="closeOnMaskClick ? handleClose() : null">
    <div class="alert-dialog" @click.stop>
      <div class="tip">
        <div class="box">
          <img v-if="iconType === 'ts'" class="tishiIcon" src="@/assets/images/login/tishi.png" alt="提示图标" />
          <img v-if="iconType === 'sc'" class="tishiIcon" src="@/assets/images/login/tishi_sc.png" alt="提示图标" />
          <img v-if="iconType === 'sl'" class="tishiIcon" src="@/assets/images/login/tishi_sl.png" alt="提示图标" />
          <img v-if="iconType === 'lj'" class="tishiIcon" src="@/assets/images/login/tishi_lj.png" alt="提示图标" />
          <div class="tishiTitle">{{title}}</div>
          <div class="tishiContent">{{message}}</div>
          <div class="btn-block" v-if="showCustom">
            <button class="btnV btnV-active" @click="handleConfirm">{{ confirmText }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  },
  iconType: {
    type: String,
    default: 'ts'
  },
  message: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '去登录'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  customText: {
    type: String,
    default: '自定义'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showCustom: {
    type: Boolean,
    default: false
  },
  closeOnMaskClick: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['close', 'confirm', 'cancel', 'custom']);

// 定时器引用
const timer = ref<number | null>(null);

// 关闭弹窗
const handleClose = () => {
  emit('close');
};

// 确认操作
const handleConfirm = () => {
  emit('confirm');
  handleClose();
};

// 取消操作
const handleCancel = () => {
  emit('cancel');
  handleClose();
};

// 自定义按钮操作
const handleCustom = () => {
  emit('custom');
  handleClose();
};

// 设置自动关闭定时器
const startAutoCloseTimer = () => {
  // 清除可能存在的旧定时器
  if (timer.value !== null) {
    clearTimeout(timer.value);
    timer.value = null;
  }
  
  // 设置新的定时器，3秒后自动关闭
  timer.value = window.setTimeout(() => {
    handleConfirm();
  }, 3000);
};

// 监听visible属性变化
watch(() => props.visible, (newValue) => {
  if (newValue) {
    // 当弹窗显示时，启动自动关闭定时器
    startAutoCloseTimer();
  } else {
    // 当弹窗隐藏时，清除定时器
    if (timer.value !== null) {
      clearTimeout(timer.value);
      timer.value = null;
    }
  }
}, { immediate: true });

// 组件挂载时，如果visible为true则启动定时器
onMounted(() => {
  if (props.visible) {
    startAutoCloseTimer();
  }
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (timer.value !== null) {
    clearTimeout(timer.value);
    timer.value = null;
  }
});
</script>

<style lang="scss" scoped>
.alert-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.alert-dialog {
  .tip {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .box {
    padding: 29.8px 30.9px 32.1px 30.9px;
    box-sizing: border-box;
    width: 377.8px;
    // height: 180px; /* 增加高度以适应三个按钮 */
    background: url(@/assets/images/login/tsbg.png);
    background-size: 100% 100%;
    border-radius: 20px;
    
    .tishiIcon {
      width: 64.2px;
      height: 64.2px;
      position: absolute;
      right: 41.8px;
      top: -32.1px;
    }
    
    .tishiTitle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1A1A1A;
      margin-bottom: 9.7px;
      text-align: center;
    }
    
    .tishiContent {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #595959;
      text-align: center;
    }
    
    .btn-block {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
      
      .btnV {
        width: 147px;
        height: 44px;
        background: #F5F6F9;
        border-radius: 19px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #BFBFBF;
        border: none;
        cursor: pointer;
      }
      
      .btnV-active {
        background: linear-gradient(90deg, #006CFF 0%, #009FFF 100%);
        border-radius: 26px;
        font-weight: 500;
        color: #FFFFFF;
      }
      
      .btnV-custom {
        background: #F5F6F9;
        border-radius: 19px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #BFBFBF;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>